<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="include :: header('开发者社区 - DEV社区')"></head>
<body>
<div th:replace="include :: top"></div>
<div th:replace="include :: column('')"></div>

<div class="layui-container">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md8 content detail">
      <div class="fly-panel detail-box" th:object="${bbsArticle}">
        <h1 th:text="*{title}"></h1>
        <div class="fly-detail-info">
          <th:block th:switch="*{cate}">
          	<span th:case="1" class="layui-badge layui-bg-green fly-detail-column">提问</span>
          	<span th:case="3" class="layui-badge layui-bg-green fly-detail-column">讨论</span>
          	<span th:case="4" class="layui-badge layui-bg-green fly-detail-column">建议</span>
          	<span th:case="99" class="layui-badge layui-bg-green fly-detail-column">分享</span>
          </th:block>
          
          <th:block th:switch="*{status}">
	          <span th:case="0" class="layui-badge">审核中</span>
	          <span th:case="1" class="layui-badge" style="background-color: #999;">未结</span>
	          <span th:case="9" class="layui-badge" style="background-color: #5FB878;">已结</span>
          </th:block>
          <span class="layui-badge layui-bg-black" th:if="*{top}">置顶</span>
          <span class="layui-badge layui-bg-red" th:if="*{rec}">精帖</span>
          
          <th:block th:if="${session.currentUser!=null and session.currentUser.admin}">
	          <div class="fly-admin-box" th:attr="data-id=*{id}">
	            <span class="layui-btn layui-btn-xs jie-admin" type="del">删除</span>
	            <th:block th:switch="*{top}">
		            <span th:case="false" class="layui-btn layui-btn-xs jie-admin" type="set" field="top" rank="1">置顶</span> 
		            <span th:case="true" class="layui-btn layui-btn-xs jie-admin" type="set" field="top" rank="0" style="background-color:#ccc;">取消置顶</span>
	            </th:block>
	            <th:block th:switch="*{rec}">
		            <span th:case="false" class="layui-btn layui-btn-xs jie-admin" type="set" field="rec" rank="1">加精</span> 
		            <span th:case="true" class="layui-btn layui-btn-xs jie-admin" type="set" field="rec" rank="0" style="background-color:#ccc;">取消加精</span>
	            </th:block>
	          </div>
          </th:block>
          <span class="fly-list-nums"> 
            <a href="javascript:void(0);" th:attr="data-id=*{id},data-title=*{title}">
            	<th:block th:switch="${collected}">
            		<i th:case="false" class="layui-icon layui-icon-rate jie-admin" type="collect" data-type="add"  title="收藏"></i>
            		<i th:case="true" class="layui-icon layui-icon-rate-solid jie-admin" style="color: #FFB800;" type="collect" data-type="remove"  title="取消收藏"></i>
            	</th:block>
            </a>
            <a href="#quickReply"><i class="iconfont" title="回答">&#xe60c;</i> <span id="jiedaCount">0</span></a>
            <i class="iconfont" title="人气">&#xe60b;</i> [[*{views}]]
          </span>
        </div>
        <div class="detail-about">
          <a class="fly-avatar" th:href="*{'/user/home/'+bbsUser.userId}">
            <img th:src="*{bbsUser.avatar!=''} ? *{bbsUser.avatar}:'/fly/images/avatar/default.png'" alt="*{bbsUser.nickname}">
          </a>
          <div class="fly-detail-user">
            <a href="../user/home.html" class="fly-link">
              <cite>[[*{bbsUser.nickname}]]</cite>
              <i class="iconfont icon-renzheng" th:if="*{#strings.length(bbsUser.nickname)>0}" th:title="*{'认证信息：'+bbsUser.authContent}"></i>
<!--               <i class="layui-badge fly-badge-vip">VIP3</i> -->
            </a>
            <span>[[*{#dates.format(createTime, 'yyyy-MM-dd HH:mm:ss')}]]</span>
          </div>
          <div class="detail-hits" id="LAY_jieAdmin" data-id="*{id}">
            <span style="padding-right: 10px; color: #FF7200">悬赏：[[*{kiss}]]飞吻</span>  
            <span class="layui-btn layui-btn-sm jie-admin " th:if="${session.currentUser!=null and bbsArticle.author == session.currentUser.userId && bbsArticle.status!=9}"><a th:href="'/safe/article/edit/'+*{id}">编辑此贴</a></span>
          </div>
        </div>
        <div class="detail-body photos">
        	<table class="layui-table" th:if="*{#strings.length(browser)>0 or #strings.length(version)>0 }">
				<tbody>
					<tr><td>版本：[[*{version}]] </td><td>浏览器：[[*{browser}]]</td></tr>
				</tbody>
			</table>
			<th:block th:utext="*{content}"/>
        </div>
      </div>

      <div class="fly-panel detail-box" id="flyReply">
        <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
          <legend>回帖</legend>
        </fieldset>

        <ul class="jieda" id="pageContent">
          <!-- 无数据时 -->
          <li class="fly-none">消灭零回复</li>
        </ul>
        <div style="text-align: center" id="pageDiv">
        </div>
        
        <div class="layui-form layui-form-pane">
          
            <div class="layui-form-item layui-form-text">
              <div class="layui-input-block" id="editor" ></div>
            </div>
            <form action="/jie/reply/" method="post">
	            <div class="layui-form-item" id="quickReply">
	              <textarea id="content" name="content" lay-verify="required" lay-reqText="回复内容不能为空" style="display:none;"></textarea>
	              <input type="hidden" name="artId" th:value="${bbsArticle.id}">
	              <input type="hidden" name="artTitle" th:value="${bbsArticle.title}">
	              <button class="layui-btn" lay-filter="reply" lay-submit>提交回复</button>
	            </div>
          	</form>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="fly-panel fly-list-one" id="LAY_hotRank">
        <h3 class="fly-panel-title">本周热议</h3>
        <dl>
        	<div class="fly-none">没有相关数据</div>
        </dl>
      </div>


    </div>
  </div>
</div>
<th:block th:include="include :: footer('jie')"/>
<script src="//unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#editor')
    editor.customConfig.onchange = function (html) {
		// 监控变化，同步更新到 textarea
		let reg=/\<p\>\<br\>\<\/p\>/g;
		html = html.replace(reg,'');
		$("#content").val(html)
    }
    editor.create()
	var artId='[[${bbsArticle.id}]]',
	 artAuthor='[[${bbsArticle.author}]]',
	 artStatus='[[${bbsArticle.status}]]';
	$(document).ready(function() {
		getArtList(1);
	});
	function getArtList(page,status,rec){
		var pageSize=10;
		$.ajax({
			type : 'post',
			url : '/comment/list',
			data : {
				artId: artId,
				pageNum : page,
				pageSize : pageSize,
			},
			cache : false,
			dataType : 'json',
			success : function(data) {
				if(data.rows.length>0){
					data.article={author:artAuthor,status:artStatus};
					$("#jiedaCount").html(data.total);
					var	html = template('mentTpl', data);
					$('#pageContent').html(html);
					layui.use('laypage', function(){
	 					var laypage = layui.laypage;
						laypage.render({
							elem : 'pageDiv',
							count : data.total, 
							curr : page || 1,
							limit: pageSize,
							theme: 'main',
							jump : function(obj, first) { //触发分页后的回调
								if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
									getArtList(obj.curr);
								}
							}
						});
					});
				}
			}
		});
	}
</script>

<script id="mentTpl" type="text/html">
		{{each rows item i}}
          <li data-id="{{item.mentId}}" data-art="{{item.artId}}" class="jieda-daan">
            <div class="detail-about detail-about-reply">
              <a class="fly-avatar" href="/user/home/{{item.author}}">
                <img src="{{item.bbsUser.avatar}}" alt="{{item.bbsUser.nickname}}">
              </a>
              <div class="fly-detail-user">
                <a href="/user/home/{{item.author}}" class="fly-link">
                  <cite>{{item.bbsUser.nickname}}</cite>
                  {{if item.bbsUser.authContent.length>0}}
					<i class="iconfont icon-renzheng" title="认证信息：{{item.bbsUser.authContent}}"></i>
                  {{/if}}
                </a>
                  {{if item.bbsUser.userId==article.author}}
                	<span>(楼主)</span>
                  {{/if}}
                  {{if item.bbsUser.admin}}
                	<span style="color:#5FB878">(管理员)</span>
                  {{/if}}
                  {{if item.bbsUser.status==1}}
                	 <span style="color:#999">（该号已被封）</span>
                  {{/if}}
                
                <!--
                <span style="color:#FF9E3F">（社区之光）</span>
                -->
              </div>

              <div class="detail-hits">
                <span>{{item.createTime}}</span>
              </div>
				
              {{if item.accept}}
              	<i class="iconfont icon-caina" title="最佳答案"></i>
              {{/if}}
            </div>
            <div class="detail-body jieda-body photos">
              {{@item.content}}
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan {{likes.indexOf(item.mentId)>-1?'zanok':''}}" type="zan">
                <i class="iconfont icon-zan"></i>
                <em>{{item.likenum}}</em>
              </span>
              <span type="reply">
                <i class="iconfont icon-svgmoban53"></i>回复
              </span>
              <div class="jieda-admin">
                <!--<span type="edit">编辑</span>-->
                {{if currentUser && currentUser.userId==item.author}}
                	<span type="del">删除</span>
                {{/if}}
                {{if currentUser!=null&&article.status==1&&article.author==currentUser.userId}}
                    <span class="jieda-accept" type="accept">采纳</span>
                {{/if}}
              </div>
            </div>
          </li>
		 {{/each}}
</script>

</body>
</html>